<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        body{
            background-image: url("img/bg.png");
        }
        .out{
            width: 400px;
            background-color: white;
            text-align: center;
            margin: auto;
        }

    </style>

    <title>Title</title>
</head>
<body>
<!--公司图标-->
<div><img src="img/logo.png"></div>
<!--中间的注册信息-->
<div class="out">
    <!--顶部信息        -->
    <div class="top">注册详情</div>
    <hr>
<!--设置表单    -->
    <form action="#" method="get" autocomplete="off">
        <!--注册信息-->
        <div class="zhuce">
           姓名: <input type="text" id="username" name="username" value="" placeholder="在此输入姓名" required><br>
            密码:<input type="password" id="password" name="password" value="" placeholder="在此输入密码" required><br>
            邮箱:<input type="email" id="email" name="email" value="" placeholder="在此输入邮箱" required><br>
            手机:<input type="tel" id="tel" name="tel" value="" placeholder="在此输入手机" required>
            <hr>
        </div>
        <!--个人信息-->
        <div class="message">
            性别:<input type="radio" id="men" name="sex" value="men"><label for="men">男</label>
            &nbsp;
            <input type="radio" id="women" name="sex" value="women"><label for="women">女</label><br>
            爱好:<input type="checkbox" id="game" name="game" value="game"><label for="game">游戏</label>
            <input type="checkbox" id="movie" name="movie" value="movie"><label for="movie">电影</label>
            <input type="checkbox" id="football" name="football" value="football"><label for="football">足球</label><br>
            出生年月:<input type="date"id="date" name="date" value="birthday"><br>
            所属城市:
            <select name="city" id="city">
                <option >--请输入所在城市--</option>
                <optgroup label="直辖市">
                <option >上海</option>
                <option >北京</option>
                <option >合肥</option>
            </optgroup>
                <optgroup label="省会">
                    <option >上海</option>
                    <option >北京</option>
                    <option >合肥</option>
                </optgroup>
            </select>
            <hr>
        </div>
        <!--个性签名-->
        <div class="charater">

            个人简介:<textarea name="haha" rows="5" cols="40" placeholder="请输入个人简介"></textarea>
            <hr>

        </div>
        <!--注册重置按钮-->
        <button type="submit">注册</button>
        <button type="reset">重置</button>
    </form>

</div>








</body>
</html>